<template>
  <Form
    ref="formValidate"
    :model="formValidate"
    :rules="ruleValidate"
    class="regist-form"
  >
    <FormItem prop="name">
      <Input v-model="formValidate.name" placeholder="请输入用户名"></Input>
    </FormItem>

    <FormItem prop="password">
      <Input type="password" v-model="formValidate.password" placeholder="密码">
      </Input>
    </FormItem>

    <FormItem prop="mail" class="email">
      <Input
        type="text"
        v-model="formValidate.mail"
        placeholder="请输入邮箱"
        class="input-email"
      >
      </Input>
      <button
        type="button"
        class="get-code"
        @click="sendCode"
        :disabled="isDisabled"
      >
        {{ this.buttonMeassage }}
      </button>
    </FormItem>

    <FormItem prop="code">
      <Input v-model="formValidate.code" placeholder="请输入验证码"> </Input>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
    </FormItem>
  </Form>
</template>
<script>
import axios from "@/util/axios";
export default {
  data() {
    return {
      formValidate: {
        name: "",
        password: "",
        mail: "",
        code: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        mail: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不少于6位",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            type: "string",
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },
      buttonMeassage: "发送验证码",
      updateTime: 60,
      isDisabled: false,
    };
  },
  methods: {
    sendCode() {
      //验证邮箱格式
      this.$refs.formValidate.validateField("mail", (valid) => {
        if (!valid) {
          //验证成功
          //发送请求获取验证码
          axios.get('user/sendCode',{params: {email: this.formValidate.mail}}).then(res => {
            console.log(res)
            if(res.code==='1') {
              //60s后才可重新发送验证码
              this.isDisabled = true
              let timeInterval = setInterval(() => {
                this.buttonMeassage = `${this.updateTime}s后可重发`
                this.updateTime--
                if(this.updateTime===0) {
                  clearInterval(timeInterval)
                  this.updateTime = 60
                  this.buttonMeassage = '发送验证码'
                  this.isDisabled = false
                }
              },1000)

            }
            else {
              this.$Message.error("该邮箱已注册过");
            }
          })
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let formData = this.formValidate;
          //发送注册请求
          axios.post('user/register',{
            data: {
              code: formData.code,
              username: formData.name,
              email: formData.mail,
              password: formData.password
            }
          }).then(res=>{
            console.log(res)
            if(res.code==='1') {
              //注册成功后
              this.$Message.success("Success!");
              this.$emit("successRegist")
            }
            else {
              this.$Message.error("验证码错误")
            }
          })

         
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};

</script>
<style lang="scss" scoped>
.regist-form {
  margin-top: 2.5rem;
  .email {
    position: relative;
    .get-code {
      width: 28%;
      height: 3rem;
      line-height: 100%;
      background-color: #0084ff;
      color: #fff;
      padding: 0.7rem;
      position: absolute;
      right: 0;
      top: 0.3rem;
      cursor: pointer;
    }
    .input-email {
      width: 72%;
    }
  }
}
.ivu-btn-primary {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  font-size: 1.8rem;
}
</style>
